<template>
	<view class="container">
		<view class="chanpin">
			<view class="name">
				{{fromData?.name}}
			</view>
			<view class="xuqiu">
				<view class="p">
					需求: {{fromData?.product_uom_qty + ' ' + fromData?.product_uom}}
				</view>
				<view class="p">
					完成: {{fromData?.quantity_done + ' ' + fromData?.product_uom}}
				</view>
			</view>
			<view class="message-box">
				<view class="first">
					<view class="p">
						第一个序列号:
					</view>
					<input class="input" type="number" v-model="indexData.fisrtIndex" placeholder="请输入第一个序列号">
				</view>
				<view class="end">
					<view class="p">
						完成数量:
					</view>
					<input class="input" type="number" v-model="indexData.nextIndex" placeholder="完成数量" />
				</view>
			</view>

			<view class="btn-box">
				<view class="btn" @click="getChanpinListBtn()">
					生成序列号
				</view>
				<view class="btn">

				</view>
			</view>
		</view>

		<view class="chanpin-item-box" v-if="viewData[0]">
			<view class="item" v-for="(item,i) in viewData" :key="i">
				<view class="title">
					<view class="p">
						至:{{item.location_dest_id}}
					</view>
					<view class="p">
						数量: {{item.qty_done + ' ' + item.product_uom_id}}
					</view>
				</view>
				<view class="xulie">
					序列号: {{item.serial_num}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getChanpinXiangqing
	} from '@/api/shouhuo.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'

	const fromData = ref({})
	const indexData = reactive({
		fisrtIndex: '',
		nextIndex: '',
		fromId: ''
	})
	const viewData = ref([])


	const getChanpinListBtn = () => {
		if (indexData.fisrtIndex.length == 0) {
			uni.showModal({
				title: '提示',
				content: '请输入第一个序列号'
			})
			return
		}

		if (indexData.nextIndex.length == 0) {
			uni.showModal({
				title: '提示',
				content: '请输入完成数量'
			})
			return
		}

		if (Number(indexData.nextIndex) > Number(fromData.value.product_uom_qty)) {
			uni.showModal({
				title: '提示',
				content: '数量超过待完成个数'
			})
			return
		}

		_getChanpinXiangqing()
	}

	const _getChanpinXiangqing = () => {

		getChanpinXiangqing(indexData).then((res) => {
			console.log(res);

			viewData.value = res.move_line_nosuggest_list
		})
	}

	onLoad((option) => {
		let data = JSON.parse(option.chanpin)
		fromData.value = data
		indexData.fromId = data.record_id
		console.log(fromData.value);
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		min-height: 100vh;
		background-color: #f5f5f5;

		.chanpin {
			border: 1rpx solid gainsboro;
			border-radius: 20rpx;
			padding: 10rpx;
			line-height: 60rpx;
			background-color: white;
			margin-bottom: 20rpx;

			.xuqiu {
				display: flex;
				justify-content: space-between;
			}

			.message-box {

				.first {
					display: flex;

					.input {
						display: block;
						padding: 16rpx;
						border-bottom: 1rpx solid gainsboro;
					}
				}

				.end {
					display: flex;

					.input {
						display: block;
						padding: 16rpx;
						border-bottom: 1rpx solid gainsboro;
					}
				}
			}

			.btn-box {
				margin-top: 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;

				.btn {
					text-align: center;
					background-color: #0891b2;
					color: white;
					border-radius: 10rpx;
				}
			}
		}

		.chanpin-item-box {
			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 20rpx;
			background-color: white;

			.item {
				padding: 10rpx;
				border-bottom: 1rpx solid gainsboro;

				.title {
					display: flex;
					justify-content: space-between;
				}
			}

		}

	}
</style>